<!doctype html>
<html>

<head>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  <title>全境征才计算器</title>
  <meta name='keywords' content='天下布魔'>
  <meta name='description' content='3.0 煌星与千鹤的词缀开始收集了'>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <style>
    #center_box {
      margin: 0 auto;
      width: 90%;
    }

    .btn {
      height: 70px;
      font-size: 50px;
      width: 32%;
      border-radius: 20px;
      margin: 6px 4px;
      box-shadow: 0 1px rgb(98, 127, 140);
      line-height: 100%;
    }

    .btn_normal {
      color: rgb(80, 80, 109);
      background-image: linear-gradient(rgb(255, 255, 255), rgb(240, 240, 240))
    }

    .btn_clicked {
      color: white;
      background-image: linear-gradient(rgb(82, 179, 222), rgb(74, 163, 209))
    }

    .btn_resetAllTags {
      width: 100%;
      color: white;
      background-color: rgb(236, 91, 85)
    }

    #foobar {
      font-size: 25px;
    }

    table {
      width: 100%;
      font-size: 30px;
      border-radius: 25px;
    }

    thead {
      background-color: #065279;
      color: white;
      font-size: 40px;
    }

    table tr:first-child th:first-child {
      border-top-left-radius: 10px;
    }

    table tr:first-child th:last-child {
      border-top-right-radius: 10px;
    }

    table tr:last-child td:first-child {
      border-bottom-left-radius: 10px;
    }

    table tr:last-child td:last-child {
      border-bottom-right-radius: 10px;
    }

    .pc-style {
      width: 75%;
      zoom: 0.4;
      margin: 0 auto;
    }

    #foobar {
      margin: 20px;
      border: 1px solid #065279;
      border-radius: 10px;
      padding: 10px;
    }
  </style>
  <script type="text/javascript">
    var tags = [];
    var ans = [];
    window.onload = function () {
      // 调整屏幕宽度
      getDevice()
      var arr = document.getElementsByClassName('btn_normal btn');
      for (var i = 0; i < arr.length; i++) {
        arr[i].className = 'btn_normal btn';
        arr[i].onclick = function () {
          if (this.className == 'btn_normal btn') {
            this.className = 'btn_clicked btn';
            // tags.push(this.innerHTML);
          } else {
            this.className = 'btn_normal btn';
            // for (let i = 0; i < arr.length; i++) {
            //   if (tags[i] == this.innerHTML) {
            //     tags.splice(i, 1);
            //     break;
            //   }
            // }
          }
          searchAndShow();
        }
      }
    }

    function searchAndShow() {
      collectSelectedTags();
      ans = [];
      searchChara([], 0);
      sortAns();
      redrawTable();
      document.getElementById("foobar").style.display = "none";
    }

    function collectSelectedTags() {
      tags = [];
      var allBtns = document.getElementsByClassName('btn');
      for(btn of allBtns) {
        if(btn.className == 'btn_clicked btn'){
          tags.push(btn.innerHTML);
        }
      };
    }

    function redrawTable() {
      var tbody = document.getElementById('tbMain');
      var trs = document.getElementsByTagName("tr");
      for (var i = trs.length - 1; i > 0; i--) {
        tbody.deleteRow(0);
      }
      for (var i = 0; i < ans.length; i++) {
        var trow = getDataRow(ans[i]);
        tbody.appendChild(trow);
      }
    }

    function getDataRow(data) {
      var row = document.createElement('tr');

      var tagCell = document.createElement('td');
      tagCell.innerHTML = data[0].tags;
      row.appendChild(tagCell);

      var nameCell = document.createElement('td');
      var value = convertCharaDataToColorfulString(data);
      nameCell.innerHTML = value;
      row.appendChild(nameCell);

      return row;
    }

    function convertCharaDataToColorfulString(data) {
      var value = "";
      for (var i = 0; i < data.length; i++) {
        value += "<div style=\"color:";
        if (data[i].value[0].startsWith("3"))
          value += "#b8860b\">";
        if (data[i].value[0].startsWith("2"))
          value += "#D87093\">";
        if (data[i].value[0].startsWith("1"))
          value += "#B0E0E6\">";
        if (data[i].value[0].startsWith("0"))
          value += "#808080\">";
        var data2 = data[i].value[1];
        for (var j = 2; j < data[i].value.length; j++) {
          if(data[i].value[j].includes("(")){
            data2 += ", <font color=\"#0066CC\">" + data[i].value[j] + "</font>";
          } else {
            data2 += ", " + data[i].value[j];
          }
        }
        value += "<u style=\"cursor:pointer\" onClick=\"lockCharaClick('"+data[i].value[0]+"')\">" + data[i].value[0] + "</u> ("+ data2 + ")</div>"
      }
      return value;
    }

    function resetAllTags() {
      console.log('resetAllTags');
      var arr = document.getElementsByClassName('btn_clicked btn');
      while (arr.length != 0) {
        arr[0].className = 'btn_normal btn';
      }
      tags = [];
      ans = [];
      redrawTable();
    }

    function searchChara(choosedTags, p) {
      if (choosedTags.length == 3 || p == tags.length) {
        checkCharaIsMatch(choosedTags);
        return;
      }
      choosedTags.push(tags[p]);
      searchChara(choosedTags, p + 1);
      choosedTags.pop();
      searchChara(choosedTags, p + 1);
    }

    function checkCharaIsMatch(tags) {
      var tmpAns = []
      dataset.forEach(function (value, key, arr) {
        if (isContain(value, tags)) {
          var tmp = {}
          tmp.tags = [...tags];
          tmp.value = value;
          tmpAns.push(tmp);
        }
      })
      if (tmpAns.length != 0) {
        ans.push(tmpAns);
      }
    }

    function isContain(arr1, arr2) {
      if (arr2.length == 0) return false;
      var isLV3 = arr2.includes("领袖");
      var isLV2 = arr2.includes("菁英");
      if (!isLV3 && arr1.includes("领袖")) {
          return false;
      }
      return prefixIncludes(arr1, arr2);
    }

    function sortAns() {
      ans.sort((a, b) => {
        return countValue(b) - countValue(a);
      })
    }

    function countValue(data) {
      var minLV = data[data.length - 1].value[0].substr(0, 1);
      var maxLV = data[0].value[0].substr(0, 1);
      var tagCount = data[0].tags.length;
      return minLV + maxLV + (100 - data.length) + (10 -tagCount);
    }
    
    function initDataSet() {
      dataset.forEach(
        chara => {for (var i=0; i < chara.length; i++) {chara[i] = chara[i].replace(/\(.*\)/, "") }}
      )
    }

    function prefixIncludes(arr1, arr2){
      return arr2.filter(item2 => arr1.find(item1 => item1.startsWith(item2))).length == arr2.length;
    }

    function lockCharaClick(charaName) {
      resetAllTags()
      var charaData;
      dataset.forEach(chara => {
        if(chara[0] == charaName){
          charaData = chara;
        }
      });
      var allBtns = document.getElementsByClassName('btn');
      for(btn of allBtns) {
        if(btn.innerHTML == "菁英")continue;
        if(charaData.find(tag => tag.startsWith(btn.innerHTML))){
          btn.className = 'btn_clicked btn';
        }
      };
      tags.push(this.innerHTML);
      searchAndShow();
    }

    var dataset = [
      ["3☆魔王 巴尔", "领袖", "火属性", "魔族", "中体型", "攻击者", "爆发力", "输出"],
      ["3☆魔王 撒旦", "领袖", "暗属性", "魔族", "中体型", "守护者", "生存力", "回击", "防御"],
      ["3☆精灵王 赛露西亚", "领袖", "风属性", "亚人", "中体型", "巨乳(?)", "辅助者", "爆发力", "支援"],
      ["3☆矮人王 兰儿", "领袖", "水属性", "亚人", "小体型", "贫乳", "攻击者", "爆发力", "输出"],
      ["3☆法斯公主 露露", "领袖", "风属性", "人类", "治疗者", "回复"],
      ["3☆魔王 伊布力斯", "领袖", "光属性", "魔族", "中体型", "攻击者", "生存力", "输出"],
      ["3☆蛇女之后 梅斯米奈雅", "领袖", "火属性", "妨碍者", "爆发力", "贫乳", "魔族", "干扰(?)", "削弱"],
      ["3☆KS-VIII 魔人偶", "暗属性", "攻击者", "领袖", "爆发力", "输出", "中体型"],
      ["3☆煌星 妲斯艾菲娜(收集中)", "暗属性", "辅助者", "领袖", "人类", "中体型(?)", "小体型(?)", "贫乳", "支援(?)"],
      ["3☆复生公主 千鹤(收集中)", "风属性", "攻击者", "领袖", "爆发力", "输出", "中体型(?)", "魔族"],

      ["2☆魔管家 艾可", "菁英", "暗属性", "魔族", "辅助者", "中体型", "美乳", "支援"],
      ["2☆圣骑士长 雷欧娜", "菁英", "水属性", "人类", "守护者", "美乳", "中体型", "生存力", "保护", "防御"],
      ["2☆神官长 菲欧菈", "菁英", "光属性", "人类", "治疗者", "美乳", "中体型", "回复"],
      ["2☆女忍者 凛月", "菁英", "风属性", "人类", "攻击者", "美乳", "小体型", "输出", "群体攻击", "爆发力"],
      ["2☆剑圣 神无雪", "菁英", "火属性", "亚人", "攻击者", "美乳", "中体型", "越战越强", "削弱"],
      ["2☆妖狐 静", "菁英", "水属性", "美乳", "妨碍者", "亚人", "小体型", "削弱", "干扰"],
      ["2☆大将军 朱诺安", "菁英", "暗属性", "人类", "攻击者", "巨乳", "中体型", "输出", "支援"],
      ["2☆天才女军师 布兰妮", "菁英", "光属性", "人类", "妨碍者", "美乳", "中体型", "群体攻击", "削弱", "爆发力", "支援"],
      ["2☆史莱姆女王 娜芙拉拉", "菁英", "风属性", "魔族", "守护者", "巨乳", "中体型", "保护", "防御", "生存力", "回复"],

      ["1☆流浪魔法师 尤依", "火属性", "攻击者", "人类", "巨乳", "小体型", "越战越强", "输出"],
      ["1☆龙女 伊维斯", "火属性", "攻击者", "亚人", "贫乳", "小体型", "越战越强", "群体攻击", "输出"],
      ["1☆猫妖 娜娜", "风属性", "攻击者", "魔族", "贫乳", "小体型", "输出"],
      ["1☆美人鱼 玛莲", "水属性", "治疗者", "亚人", "美乳", "中体型", "回复"],
      ["1☆犬人族 朵拉", "风属性", "守护者", "亚人", "美乳", "保护", "生存力", "中体型", "防御"],
      ["1☆双蛇军团护士长 艾琳", "光属性", "治疗者", "人类", "巨乳", "中体型", "回复"],
      ["1☆魅魔 撒芭丝", "暗属性", "妨碍者", "魔族", "美乳", "干扰", "削弱", "中体型"],
      ["1☆暗黑精灵 索拉卡", "暗属性", "妨碍者", "亚人", "中体型", "削弱", "美乳"],

      ["0☆法斯帝国法师 佩托拉", "光属性", "攻击者", "人类", "贫乳", "中体型", "群体攻击", "输出", "士兵", "越战越强"],
      ["0☆矮人战士 可儿", "水属性", "攻击者", "亚人", "贫乳", "小体型", "输出", "爆发力", "士兵"],
      ["0☆精灵射手 奥菈", "风属性", "攻击者", "亚人", "美乳", "中体型", "输出", "士兵"],
      ["0☆魔族法师 玛努艾拉", "暗属性", "攻击者", "中体型", "魔族", "美乳", "输出", "士兵"],
      ["0☆烈日国武士 桔梗", "火属性", "妨碍者", "人类", "美乳", "中体型", "削弱", "士兵"],
      ["0☆蛇女 拉米亚", "火属性", "妨碍者", "美乳", "中体型", "削弱", "干扰", "士兵"],
      ["0☆史莱姆娘 萝尔", "水属性", "妨碍者", "魔族", "美乳", "小体型", "削弱", "生存力", "士兵", "回复"],
      ["0☆鸟身女妖 哈比", "风属性", "妨碍者", "魔族", "美乳", "小体型", "干扰", "士兵"],
      ["0☆法斯帝国士兵 赛莲", "暗属性", "守护者", "人类", "美乳", "中体型", "保护", "防御", "士兵"],
      ["0☆牛女 米诺", "风属性", "守护者", "亚人", "巨乳", "中体型", "干扰", "保护", "防御", "生存力", "士兵"],
      ["0☆魔族战士 芙蕾", "光属性", "守护者", "魔族", "美乳", "中体型", "保护", "士兵", "防御"],
      ["0☆圣光骑士 玛蒂娜", "光属性", "守护者", "人类", "美乳", "中体型", "保护", "生存力", "防御", "士兵"],
      ["0☆双蛇军团士兵 夏琳", "火属性", "守护者", "人类", "美乳", "中体型", "防御", "群体攻击", "保护", "士兵"],
      ["0☆烈日国巫女 枫", "风属性", "治疗者", "人类", "美乳", "中体型", "回复", "越战越强", "士兵"],
      ["0☆主神教团僧兵 克蕾雅", "光属性", "治疗者", "人类", "美乳", "中体型", "回复", "士兵"],
      ["0☆试做机三号", "光属性", "攻击者", "小体型", "士兵", "美乳", "输出", "生存力"],
      ["0☆法斯菁英近卫 安娜", "火属性", "守护者", "人类", "中体型", "防御", "士兵", "保护", "美乳"],
      ["0☆法斯高阶法师 诺诺可", "水属性", "攻击者", "人类", "中体型", "美乳", "输出", "士兵", "爆发力"],
      ["0☆法斯精锐骑士 布兰", "风属性", "攻击者", "人类", "中体型", "美乳", "输出", "防御", "士兵"],
    ]

    function getDevice() {
      var agent = navigator.userAgent.toLowerCase();
      var result = {
        device: function () {
          if (/windows/.test(agent)) {
            var $body = document.getElementById('body')
            $body.classList.add('pc-style');
            return 'windows pc';
          } else if (/iphone|ipod/.test(agent) && /mobile/.test(agent)) {
            return 'iphone';
          } else if (/ipad/.test(agent) && /mobile/.test(agent)) {
            return 'ipad';
          } else if (/android/.test(agent) && /mobile/.test(agent)) {
            return 'android';
          } else if (/linux/.test(agent)) {
            return 'linux pc';
          } else if (/mac/.test(agent)) {
            return 'mac';
          } else {
            return 'other';
          }
        }(),
      };
      return result;
    }
  </script>

<body style="background:#F8F8FF" id="body">
  <div id="center_box">
    <h1 style="display: inline;">全境征才计算器 Ver3.0 by 小r</h1><small>邀请码 USHL2U</small></br>

    <button type="button" class='btn_normal btn'>攻击者</button>
    <button type="button" class='btn_normal btn'>守护者</button>
    <button type="button" class='btn_normal btn'>辅助者</button>
    <button type="button" class='btn_normal btn'>治疗者</button>
    <button type="button" class='btn_normal btn'>妨碍者</button>
    <br>
    <button type="button" class='btn_normal btn'>魔族</button>
    <button type="button" class='btn_normal btn'>亚人</button>
    <button type="button" class='btn_normal btn'>人类</button>
    <br>
    <button type="button" class='btn_normal btn'>贫乳</button>
    <button type="button" class='btn_normal btn'>美乳</button>
    <button type="button" class='btn_normal btn'>巨乳</button>
    <br>
    <button type="button" class='btn_normal btn'>小体型</button>
    <button type="button" class='btn_normal btn'>中体型</button>
    <br>
    <button type="button" class='btn_normal btn'>爆发力</button>
    <button type="button" class='btn_normal btn'>回复</button>
    <button type="button" class='btn_normal btn'>输出</button>
    <button type="button" class='btn_normal btn'>削弱</button>
    <button type="button" class='btn_normal btn'>干扰</button>
    <button type="button" class='btn_normal btn'>保护</button>
    <button type="button" class='btn_normal btn'>生存力</button>
    <button type="button" class='btn_normal btn'>群体攻击</button>
    <button type="button" class='btn_normal btn'>士兵</button>
    <button type="button" class='btn_normal btn'>越战越强</button>
    <button type="button" class='btn_normal btn'>防御</button>
    <button type="button" class='btn_normal btn'>支援</button>
    <br>
    <button type="button" class='btn_normal btn'>火属性</button>
    <button type="button" class='btn_normal btn'>风属性</button>
    <button type="button" class='btn_normal btn'>暗属性</button>
    <button type="button" class='btn_normal btn'>光属性</button>
    <button type="button" class='btn_normal btn'>水属性</button>
    <br>
    <button type="button" class='btn_normal btn'>领袖</button>
    <button type="button" class='btn_normal btn'>菁英</button>
    <button type="button" class='btn_normal btn'>回击</button>
    <br>
    <button type="button" class="btn_resetAllTags btn" onclick="resetAllTags()">重置选择</button>
    <br>

    <table border="1" cellspacing="0">
      <thead>
        <tr>
          <th>选择</th>
          <th>角色清单</th>
        </tr>
      </thead>
      <tbody id="tbMain"></tbody>
    </table>

    <div id="foobar">
      <h1><b>3.0 煌星与千鹤的词缀开始收集了，小心歪新卡，当然如果真歪了记得汇报</b></br></h1>
      2.9 由@帝国の栄光に輝い确认了撒旦的防御词缀</br>
      2.8 由@lixiaoyaosi确认了蛇后的削弱词缀</br>
      2.7 发现领袖与防御、削弱能同时出现，猜想撒旦有防御，蛇后有削弱。收集到一例爆发力出巴尔的案例，去除爆发力的问号。</br>
      2.6 新增了查询指定角色必出词缀的功能，只需要在结果表格里点击对应角色就可以查看。对于2词必出角色，会显示很多重复的3词，注意自行筛选。该功能不会将“菁英”词缀考虑在内</br>
      2.5 <b>新增了存疑词缀，会设为蓝色，需要自行判断。</br>
        本计算器的领袖词缀由于样本过少，可能出现各种疏漏。
        对于领袖词缀的选择请借助其他渠道再次确认</b></br>
        主要更新了领袖的词缀：</br>
        伊布：回复改为输出</br>
        巴尔：爆发改为存疑（贴吧有出货的），添加输出</br>
        矮人王：添加输出</br>
        精灵王：巨乳改为存疑，因为没见人出过这个词</br>
        机娘：添加输出和中体型词缀</br>
        蛇后：添加爆发力 贫乳 魔族词缀，个人猜想有干扰词缀（存疑），先加上了</br>
        换了一个更朴素的颜色</br>
        PC页面缩放默认为40%</br>
      <br/>
      2.4: 根据贴吧反馈移回了巴尔的爆发词缀（存疑），给机娘加了爆发词缀</br>
      为军师补回了支援词缀</br>
      为艾可添加了中体型词缀</br>
      为狐狸添加了干扰词缀</br>
      移除桔梗的输出词缀</br>
      为米诺添加生存力</br>
      添加了布兰</br>
      为试作机添加了输出词缀</br>
      修正安娜为火属性</br>
      注意到1星是没有士兵词缀的(?)，已经全部移除</br>
      <br/>
      2.3：根据贴吧反馈移除了巴尔的爆发词缀。游戏更新为小史莱姆添加了回复词缀，刷女王变难了</br>
      2.2：添加了史莱姆女王的数据。以及其他新角色的不完整数据</br>
      之前以为这个网页坏了所以一直在 rshock.github.io 更新，现在在这边也更新了。有问题直接贴吧反馈吧。</br>
      最好的游戏攻略 公益类初始号 代充 尽在<a href="http://tenkafuma.gamekee.com/">天下布魔中文维基wiki(已倒闭)</a>
    </div>

    <div hidden>如你所见本页面没有任何加密，因此请勿随意盗用本页面</div>
  </div>
</body>

</html>
